<!DOCTYPE html>

<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->

<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->

<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->

<!-- BEGIN HEAD -->

<head>

	<meta charset="utf-8" />

	<title>Metronic | Form Stuff - Form Validation</title>

	<meta content="width=device-width, initial-scale=1.0" name="viewport" />

	<meta content="" name="description" />

	<meta content="" name="author" />

	<!-- BEGIN GLOBAL MANDATORY STYLES -->

	<link href="__CSS__/bootstrap.min.css" rel="stylesheet" type="text/css"/>

	<link href="__CSS__/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"/>

	<link href="__CSS__/font-awesome.min.css" rel="stylesheet" type="text/css"/>

	<link href="__CSS__/style-metro.css" rel="stylesheet" type="text/css"/>

	<link href="__CSS__/style.css" rel="stylesheet" type="text/css"/>

	<link href="__CSS__/style-responsive.css" rel="stylesheet" type="text/css"/>

	<link href="__CSS__/default.css" rel="stylesheet" type="text/css" id="style_color"/>

	<link href="__CSS__/uniform.default.css" rel="stylesheet" type="text/css"/>

	<!-- END GLOBAL MANDATORY STYLES -->

	<!-- BEGIN PAGE LEVEL STYLES -->

	<link rel="stylesheet" type="text/css" href="__CSS__/select2_metro.css" />

	<link rel="stylesheet" type="text/css" href="__CSS__/chosen.css" />

	<!-- END PAGE LEVEL STYLES -->

	<link rel="shortcut icon" href="__IMG__/favicon.ico" />

</head>

<!-- END HEAD -->

<!-- BEGIN BODY -->

<body class="page-header-fixed">

	<!-- BEGIN HEADER -->

	<!-- BEGIN CONTAINER -->



				<div class="row-fluid">

					<div class="span12">

						<!-- BEGIN VALIDATION STATES-->

						<div class="portlet box purple">

							<div class="portlet-title">

								<div class="caption"><i class="icon-reorder"></i>Basic Validation</div>

								<div class="tools">

									<a href="javascript:;" class="collapse"></a>

									<a href="#portlet-config" data-toggle="modal" class="config"></a>

									<a href="javascript:;" class="reload"></a>

									<a href="javascript:;" class="remove"></a>

								</div>

							</div>

							<div class="portlet-body form">

								<!-- BEGIN FORM-->

								<form action="#" id="form_sample_1" class="form-horizontal">

									<div class="alert alert-error hide">

										<button class="close" data-dismiss="alert"></button>

										You have some form errors. Please check below.

									</div>

									<div class="alert alert-success hide">

										<button class="close" data-dismiss="alert"></button>

										Your form validation is successful!

									</div>

									<div class="control-group">

										<label class="control-label">Name<span class="required">*</span></label>

										<div class="controls">

											<input type="text" name="name" data-required="1" class="span6 m-wrap"/>

										</div>

									</div>

									<div class="control-group">

										<label class="control-label">Email<span class="required">*</span></label>

										<div class="controls">

											<input name="email" type="text" class="span6 m-wrap"/>

										</div>

									</div>

									<div class="control-group">

										<label class="control-label">URL<span class="required">*</span></label>

										<div class="controls">

											<input name="url" type="text" class="span6 m-wrap"/>

											<span class="help-block">e.g: http://www.demo.com or http://demo.com</span>

										</div>

									</div>

									<div class="control-group">

										<label class="control-label">Number<span class="required">*</span></label>

										<div class="controls">

											<input name="number" type="text" class="span6 m-wrap"/>

										</div>

									</div>

									<div class="control-group">

										<label class="control-label">Digits<span class="required">*</span></label>

										<div class="controls">

											<input name="digits" type="text" class="span6 m-wrap"/>

										</div>

									</div>

									<div class="control-group">

										<label class="control-label">Credit Card<span class="required">*</span></label>

										<div class="controls">

											<input name="creditcard" type="text" class="span6 m-wrap"/>

											<span class="help-block">e.g: 5500 0000 0000 0004</span>

										</div>

									</div>

									<div class="control-group">

										<label class="control-label">Occupation&nbsp;&nbsp;</label>

										<div class="controls">

											<input name="occupation" type="text" class="span6 m-wrap"/>

											<span class="help-block">optional field</span>

										</div>

									</div>

									<div class="control-group">

										<label class="control-label">Category<span class="required">*</span></label>

										<div class="controls">

											<select class="span6 m-wrap" name="category">

												<option value="">Select...</option>

												<option value="Category 1">Category 1</option>

												<option value="Category 2">Category 2</option>

												<option value="Category 3">Category 5</option>

												<option value="Category 4">Category 4</option>

											</select>

										</div>

									</div>

									<div class="form-actions">

										<button type="submit" class="btn purple">Validate</button>

										<button type="button" class="btn">Cancel</button>

									</div>

								</form>

								<!-- END FORM-->

							</div>

						</div>

						<!-- END VALIDATION STATES-->

					</div>

				</div>

				

				<!-- END PAGE CONTENT-->         


		<!-- END PAGE -->  


	<!-- END CONTAINER -->

	<!-- BEGIN FOOTER -->

	<div class="footer">

		<div class="footer-inner">

			2013 &copy; Metronic by keenthemes.Collect from <a href="http://www.mycodes.net/153/" title="网站模板" target="_blank">网站模板</a> - More Templates <a href="http://www.mycodes.net/" title="源码之家" target="_blank">源码之家</a>

		</div>

		<div class="footer-tools">

			<span class="go-top">

			<i class="icon-angle-up"></i>

			</span>

		</div>

	</div>

	<!-- END FOOTER -->

	<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->

	<!-- BEGIN CORE PLUGINS -->

	<script src="__JS__/jquery-1.10.1.min.js" type="text/javascript"></script>

	<script src="__JS__/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>

	<!-- IMPORTANT! Load jquery-ui-1.10.1.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->

	<script src="__JS__/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>      

	<script src="__JS__/bootstrap.min.js" type="text/javascript"></script>

	<!--[if lt IE 9]>

	<script src="__JS__/excanvas.min.js"></script>

	<script src="__JS__/respond.min.js"></script>  

	<![endif]-->   

	<script src="__JS__/jquery.slimscroll.min.js" type="text/javascript"></script>

	<script src="__JS__/jquery.blockui.min.js" type="text/javascript"></script>  

	<script src="__JS__/jquery.cookie.min.js" type="text/javascript"></script>

	<script src="__JS__/jquery.uniform.min.js" type="text/javascript" ></script>

	<!-- END CORE PLUGINS -->

	<!-- BEGIN PAGE LEVEL PLUGINS -->

	<script type="text/javascript" src="__JS__/jquery.validate.min.js"></script>

	<script type="text/javascript" src="__JS__/additional-methods.min.js"></script>

	<script type="text/javascript" src="__JS__/select2.min.js"></script>

	<script type="text/javascript" src="__JS__/chosen.jquery.min.js"></script>

	<!-- END PAGE LEVEL PLUGINS -->

	<!-- BEGIN PAGE LEVEL STYLES -->

	<script src="__JS__/app.js"></script>

	<script src="__JS__/form-validation.js"></script> 

	<!-- END PAGE LEVEL STYLES -->    

	<script>

		jQuery(document).ready(function() {   

		   // initiate layout and plugins

		   App.init();

		   FormValidation.init();

		});

	</script>

	<!-- END JAVASCRIPTS -->   

</body>

<!-- END BODY -->

</html>